<script setup lang="ts">
import { getAdminLoginRecordsApi, getAdminsListApi } from '@/apis/modules/admin'
import { useConfig } from './useConfig'

const { data: admins } = useListRequest(getAdminsListApi, {
  immediate: true,
  noPagination: true,
})
const { queryParams, tableColumns } = useConfig()
const { loading, run, pagination, data } = useListRequest(
  getAdminLoginRecordsApi,
  {
    params: queryParams,
    immediate: true,
  },
)
const adminsOptions = computed(() =>
  admins.value?.map(item => ({
    label: item.username,
    value: item.id,
  })),
)

const { createSortChange } = useTable(run, data)

const onSorterChange = createSortChange(queryParams)
</script>

<template>
  <main-container
    v-model:pagination="pagination"
    :loading="loading"
    @run="run"
  >
    <template #header>
      <a-select
        v-model="queryParams.admin_id"
        class="max-w-42"
        placeholder="全部账号"
        :options="[{ label: '全部账号', value: undefined }, ...adminsOptions]"
        @change="() => run()"
      />
    </template>
    <a-table
      v-bind="commonTableProps"
      :columns="tableColumns"
      :data="data"
      @sorter-change="onSorterChange"
    />
  </main-container>
</template>

<style scoped></style>
